<style lang="scss" scoped>
@import '../../styles/common/loading.less';
.container{
    border: none !important;
    margin-top: 4px;
}
.el-col-offset-1 {
    margin-left: 0%;
}
.button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

}
.col_a {
    margin-left: 2%;
}
.el-card {
    height: 200px;
}

.el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
}
</style>
<template>
    <div class="common-background-color"
         v-loading="loading"
         element-loading-text="loading......"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="width:98%;height:85%;margin: 36px 12px;margin-right: 50px;">
            <el-collapse v-model="activeNames"  >
                <el-collapse-item title="结算汇总信息"  name="1">
                    <el-form :model="prpLSettlementDTO" class="info-submit-form">
                        <el-row type="flex">
                            <el-col :span="8" >
                                <el-form-item label="医疗机构名称">
                                    <el-input v-model="prpLSettlementDTO.hospName" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="结算笔数">
                                    <el-input v-model="prpLSettlementDTO.settleNum"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="医疗费用总额">
                                    <el-input v-model="prpLSettlementDTO.medicalFeeAmount" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                            <el-col :span="8" >
                                <el-form-item label="扣款金额">
                                    <el-input v-model="prpLSettlementDTO.deductionAmount"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="应补金额">
                                    <el-input v-model="prpLSettlementDTO.supplementAmount"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="实际支付金额">
                                    <el-input v-model="prpLSettlementDTO.actualPaymentAmount"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-collapse-item>
            </el-collapse>
            <el-collapse  v-model="activeNames"  >
                <el-collapse-item title="账号信息"  name="2">
                    <el-form :model="prpLPayee" class="info-submit-form">
                        <!--                        第1行-->
                        <el-row type="flex">
                            <el-col :span="8">
                                <el-form-item label="领款人姓名"   >
                                    <el-input  v-model="prpLPayee.payeeName"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"  >
                                <el-form-item label="支付对象"  >
                                    <el-input v-model="prpLPayee.payObjectName"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="联系电话">
                                    <el-input v-model="prpLPayee.phone"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!--                        第2行-->
                        <el-row type="flex">
                            <el-col :span="8"  >
                                <el-form-item label="证件类型"  >
                                    <el-input v-model="prpLPayee.identifyTypeName"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="证件号码"  >
                                    <el-input v-model="prpLPayee.identifyNo"   disabled></el-input>
                                </el-form-item>
                            </el-col>                
                            <el-col :span="8">
                                <el-form-item label="收款银行大类"  >
                                    <el-input v-model="prpLPayee.bankBroad"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!--                        第4行-->
                        <el-row type="flex">
                            <el-col :span="8" >
                                <el-form-item label="开户行省"   >
                                    <el-input v-model="prpLPayee.bankProvinceName"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"  >
                                <el-form-item label="开户行市"  >
                                    <el-input v-model="prpLPayee.bankCityName"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="开户行区/县"  >
                                    <el-input v-model="prpLPayee.bankDistrictName" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                            <el-col :span="8">
                                <el-form-item label="开户银行"  >
                                    <el-input v-model="prpLPayee.bankName" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="对公对私"  >
                                    <el-input v-model="prpLPayee.bankToPubPriName"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"  >
                                <el-form-item label="银行地址">
                                    <el-input v-model="prpLPayee.bankAddress"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!--                        第5行-->
                        <el-row type="flex">
                            <el-col :span="8">
                                <el-form-item label="账号" >
                                    <el-input v-model="prpLPayee.bankNo"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="赔款金额">
                                    <el-input v-model="prpLPayee.payAmount"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="赔款摘要"  >
                                    <el-input v-model="prpLPayee.remark"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-collapse-item>
            </el-collapse>
            <el-collapse  v-model="activeNames">
                <el-collapse-item title="结算历史轨迹" name="3">
                  <div style="background-color:#FFF;">
                    <el-table
                      :data="prpLClaimOpinionRecordDTOList"
                      class="table"
                      ref="multipleTable"
                      header-cell-class-name="table-header"
                    >
                      <el-table-column prop="handlerCode" label="审核人工号" align="center"></el-table-column>
                      <el-table-column prop="handlerName" label="审核人姓名" align="center"></el-table-column>
                      <el-table-column prop="auditOpinion" :formatter="formatTaskState" label="审核状态" align="center"></el-table-column>
                      <el-table-column prop="remark" label="备注" align="center"></el-table-column>
                      <el-table-column prop="handlTime" label="审核时间" align="center"></el-table-column>
                    </el-table>
                  </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <!-- 结算单明细弹出框 -->
        <el-dialog
          title="结算单明细"
          :visible.sync="centerDialogVisible" append-to-body
          width="70%"
          center>
          <div>
            <template>
              <el-table
                :data="settleCaseInfoList"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                style="margin-top: 30px" 
              >
                <el-table-column prop="caseNo" label="大病赔案号"  width="165" align="center">
                  <template  slot-scope="scope">
                    <a href="#">{{scope.row.caseNo}}</a>
                  </template>
                </el-table-column>
                <el-table-column prop="medicalType" label="医疗类别" align="center"></el-table-column>
                <el-table-column prop="sumAmount" label="医疗费用金额" align="center"></el-table-column>
                <el-table-column prop="undwrtDate" label="核赔日期"  width="150" align="center"></el-table-column>
                <el-table-column prop="sumPayAmount" label="实际支付金额" align="center"></el-table-column>
              </el-table>
              <!-- <div class="pagination">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="1">
                </el-pagination>
              </div> -->
            </template>
          </div>
          <div slot="footer" class="dialog-footer">
              <el-button type="info" @click="centerDialogVisible = false">关  闭</el-button>
          </div>
        </el-dialog>
        <div style="margin-top: 25px;text-align: center;height: 70px">
            <el-button type="primary" size="medium"  style="width: 9%" v-if="(this.taskState==='01' || this.taskState==='03')" @click="centerDialogVisible=true">结算单明细</el-button>
            <el-button type="primary" size="medium"  style="width: 9%" @click="handleClose">关闭</el-button>
        </div>
    </div>
</template>

<script>
import{querySettlementDetail}from '@/api/baseDate';
import Cookies from 'js-cookie';
export default {
    name: 'settlementTaskListDetailCache',
    data() {
        return {
            loading:false,
            activeNames: ['1','2','3'],
            centerDialogVisible:false, // 结算单明细
            data:{
                prpLPayee:{}
            },
            prpLSettlementDTO: {},
            prpLPayee:{},
            taskState:'03',
            settleCaseInfoList:[],
            prpLClaimOpinionRecordDTOList:[],
        };
    },
    activated(){
        if(this.$route.params.taskId!=undefined){
            this.querySettleDetail();
        }
    },
    created() {
        this.querySettleDetail();
    },
    methods: {
        // 关闭当前页面跳转至结算查询页面
        handleClose(){
            this.closePageTo(this.$store,this.$route,this.$router,'settlementTaskList');
        },
        querySettleDetail(){
            let taskId  = this.$route.params.taskId;
            let settleNo  = this.$route.params.settleNo;
            let taskState  = this.$route.params.taskState;
            this.id = taskId;
            this.settleNo = settleNo;
            this.taskState = taskState;
            const param = {
                id: taskId,
                settleNo: settleNo
            }
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            querySettlementDetail(param).then((res)=> this.handleTaskResponse(res));
        },
        handleTaskResponse(res){
            this.loading = false;
            if(res){
              if(res.data.resultCode){
                  if(res.data.resultCode != '0000'){ 
                      // 返回失败
                      this.$message.error(res.data.resultMsg);
                  }else{
                      this.settleCaseInfoList = res.data.settleCaseInfoList;
                      this.prpLSettlementDTO = res.data;
                      this.prpLPayee = res.data.prpLPayee;
                      this.prpLClaimOpinionRecordDTOList = res.data.prpLClaimOpinionRecordDTOList;
                      if(res.data.prpLPayee.bankToPubPri){
                        if(res.data.prpLPayee.bankToPubPri == '1'){
                          this.prpLPayee.bankToPubPriName = '对公';
                        }else{
                          this.prpLPayee.bankToPubPriName = '对私';
                        } 
                      }
                  }
              }else{
                  this.$message.error('系统异常'); 
              }
            }else{
              this.$message.error('系统异常'); 
            }
        }
    },
    
}
</script>